<template>
  <div>
    <van-popup
      :show="true"
      position="bottom"
      :style="{ height: overlay ? '80%' : '30%' }"
      class="userInfo"
      @click-overlay="clickShow()"
      overlay-class="overlayClass"
    >
      <!-- 上滑进入 -->
      <div :class="'overlay txt_center ' + (overlay && 'actives')">
        <van-icon
          @click="clickShow()"
          v-show="!overlay"
          name="arrow-up"
          class="animation"
        />
        <van-icon
          @click="clickShow()"
          v-show="overlay"
          name="arrow-down"
          class="animation2"
        />
      </div>
      <div class="popup">
        <div class="avater">
          <van-image
            round
            width="100%"
            height="100%"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            @click="router.push('/userInfo')"
          />
          <div class="txt_center mt-5 myName">李先生</div>
        </div>
        <div class="vipTag">
          <div class="tag x_y_center" @click="router.push('/myCard')">
            会员权益<van-icon name="arrow" />
          </div>
          <div class="grid">
            <van-grid :column-num="3">
              <van-grid-item>
                <div class="num">￥0</div>
                <div class="txt">余额</div>
              </van-grid-item>
              <van-grid-item>
                <div class="num">99</div>
                <div class="txt">魅力点</div>
              </van-grid-item>
              <van-grid-item>
                <div class="num">1</div>
                <div class="txt">优惠券</div>
              </van-grid-item>
            </van-grid>
          </div>
          <div class="other txt_left">
            <!-- <div class="p-15 six">第六感服务站</div> -->
            <van-cell title="立即充值" is-link to="home" icon="balance-o" />
            <van-cell title="卡券兑换" is-link to="home" icon="coupon-o" />
            <van-cell title="常见问题" is-link to="home" icon="question-o" />
            <van-cell title="我的客服" is-link to="home" icon="service-o" />
            <van-cell title="更多服务" is-link to="home" icon="setting-o" />
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRouter } from "vue-router";
export default {
  props: {
    btnShow: {
      type: Boolean,
      required: true,
    },
  },
  components: {},
  setup(props, context) {
    const overlay = ref(false);
    const router = useRouter();
    const clickShow = () => {
      overlay.value = !overlay.value;
      if (overlay.value) return context.emit("update:btnShow", !overlay.value);
      setTimeout(() => context.emit("update:btnShow", !overlay.value), 500);
    };

    return {
      overlay,
      router,
      clickShow,
    };
  },
};
</script>

<style lang="less" scoped>
/deep/.overlayClass {
  background-color: rgba(0, 0, 0, 0);
}
/deep/.userInfo {
  z-index: 2003 !important;
  margin-left: 20px;
  margin-right: 20px;
  // padding-bottom: 0;
  width: calc(100% - 40px);
  transition: all 0.5s ease 0s;
  overflow: hidden;
  background: none;
  .actives {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.35),
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.15),
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.05)
    );
  }
  .overlay {
    padding-top: 15px;
    font-size: 20px;
    // transform: translateY(-20px);
    padding-bottom: 30px;

    .animation {
      animation: myfirst 1s infinite;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
    }
    @keyframes myfirst {
      0% {
        transform: translateY(0px);
      }
      100% {
        transform: translateY(-20px);
      }
    }
    .animation2 {
      animation: myfirst2 1s infinite;
      font-size: 25px;
      font-weight: bold;
      color: #fff;
    }
    @keyframes myfirst2 {
      0% {
        transform: translateY(-20px);
      }
      100% {
        transform: translateY(0px);
      }
    }
  }
  .popup {
    width: 100%;
    height: 70vh;
    background: #fff;
    border-radius: 0.4rem 0.4rem 0 0;
    position: relative;
    .avater {
      height: 80px;
      width: 80px;
      position: absolute;
      top: -30px;
      left: 50%;
      transform: translateX(-50%);
      border: 1px solid #fff;
      border-radius: 50%;
      .myName {
        font-size: 20px;
      }
    }
    .vipTag {
      height: 20px;
      text-align: right;
      height: 61vh;
      .tag {
        margin-top: 15px;
        background: #f7e7ea;
        display: inline-block;
        padding: 5px 10px;
        border-radius: 15px 0 0 15px;
        color: #b31731;
      }
      .grid {
        width: 100%;
        margin-top: 40px;
        .num {
          color: #b31731;
          font-size: 14px;
        }
        .txt {
          font-size: 16px;
        }
      }
      .other {
        height: calc(61vh - 150px);
        // background: burlywood;
        overflow-y: auto;
        .six {
          font-size: 16px;
        }
      }
    }
  }
}
</style>
